Iguana – Structuur & Stijl
1 Inleiding
1.1 Thema van uw site bepalen
De meeste secties van de documentatie gaan over de inhoud van uw site(s). Dit document beschrijft hoe u een thema aan uw site kunt toekennen.
De voornaamste componenten die de stijl van uw site bepalen zijn:
· de site profiel secties
· het sjabloon voor pagina lay-out
· de positie van applicaties op elke pagina
· (banner) afbeeldingen
· (banner) animaties
· het CSS
· de sjablonen.
De voornaamste elementen die worden beschreven in dit document zijn:
· thema
· sjabloon.
De overige elementen gerelateerd aan thema's die worden genoemd zijn beschreven in andere secties van de documentatie.
1.2 Richtlijnen voor gebruik en wijzigen van stylesheets
Hoewel het Iguana CMS definities bevat van een groot aantal presentatie elementen, kan het zijn dat dit niet toereikend is. Met andere woorden, het kan zijn dat u behoefte heeft aan wijzigingen die niet binnen het CMS gemaakt kunnen worden.
De cascading stylesheets die bij Iguana geleverd worden, kunnen gebruikt worden om de presentatie van Iguana pagina's verder aan te passen.
Hoewel er voorbeelden staan in onderstaande documentatie, is het niet de bedoeling in een complete handleiding te voorzien. Infor gaat er van uit dat de klant die de CSS bestanden wil aanpassen de kennis daarvoor in huis heeft of zelf aantrekt.
Dit is een korte toelichting op werkwijze binnen Infor en de werkwijze en standaarden die verwacht worden o systemen van klanten.
Let op
Infor kan de default stylesheet bestanden bij een upgrade overschrijven – of op enig ander moment als dat voor ondersteuning noodzakelijk is.
Pas dus niet een geleverd stylesheet bestand aan, maar creëer er zelf eentje.
De bestanden die niet gewijzigd mogen worden zijn ALLE BESTANDEN in de directory css/themes (zie schermvoorbeeld hieronder).
Iguana is gebouwd rond het concept van thema's en er wordt verwacht dat de klant een bepaald thema kiest voor een set webpagina's.
Het is echter ook mogelijk om een CSS bestand aan te maken en dit op één of meerdere pagina's toe te passen.
Infor geeft er de voorkeur aan dat er een nieuw thema wordt gedefinieerd.
1.2.1 Een nieuw thema definiëren
Er wordt aangenomen dat de klant toegang heeft tot de directory op de server waar de bestanden zich bevinden – dat kan een aparte webserver zijn, maar alles kan ook op een enkele server staan.
1. Ga naar de Iguana directory en dan naar de subdirectory CSS/css/themes, bijvoorbeeld
M:\newinfor\iguana\CSS\css\themes
2. Elke directory onder "themes" vertegenwoordigt een thema met die naam. Maak op dit niveau een nieuwe directory aan, met de naam van uw thema, bijv. “aangepast”.
3. Maak een bestand aan in deze directory met de naam van uw nieuwe thema, bijv. “aangepast.css".
4. Geef op de eerste regels aan dat het basis css bestand van het thema waar uw nieuwe thema van afgeleid is opgenomen moet worden, bijvoorbeeld, als u uw thema baseert op het basis thema dan opent u het bestand met
@import url("../base/base.css");
Of, als u uw thema baseert op het highcontrast thema dan opent u het bestand met
@import url("../highcontrast/highcontrast.css");
Natuurlijk kunt u ook een compleet basis css bestand van een ander thema kopiëren, maar deze aanpak zorgt voor de beste compatibiliteit met wijzigingen in de door Infor geleverde basis stylesheets.
5. Breng uw wijzigingen aan in dit bestand en voeg commentaar toe om de aard van de wijzigingen toe te lichten.
6. Om te testen voegt u de parameter Theme=UwThemaNaam toe aan de Iguana URL. (Dit blijft dan gelden voor de sessie, tenzij u expliciet naar het default thema terugkeert). Bijvoorbeeld
//server/Iguana/StartCMS.cls?Theme=aangepast
7. Zorg dat de site het thema gebruikt door dit te configureren onder de geavanceerde eigenschappen van het site profiel in het CMS.
Als u geen thema definieert
Infor adviseert u de CSS bestanden op dezelfde manier te structureren, d.w.z. de thema subdirectory, en met toepasselijke benaming.
Dit is uiteraard niet de enige manier om met stylesheets om te gaan. Het kan zijn dat een andere aanpak beter aansluit bij uw specifieke omstandigheden. Welke keuze u ook maakt, zorg ervoor dat dit voldoet aan de principes in dit document en documenteer uw wijzigingen voor degenen die na u komen.
NB
U kunt ook de Media Manager onder Algemeen & Gereedschap gebruiken om een thema te laden.
2 Thema's : gebruik van CSS voor de stijl van uw site
2.1 Inleiding
Het bepalen van de stijl van een Iguana site wordt voornamelijk gedaan via het gebruik van CSS (Cascading Style Sheets). Iguana wordt geleverd met een aantal standaard CSS thema's, die u kunt gebruiken om de stijl van uw site te bepalen. Iguana's default installatie gebruikt twee stylesheets: een lokaal en een basis stylesheet. Het basis stylesheet (genaamd /base/base.css), is het basis stylesheet met de standaard instellingen voor een Iguana site. Het lokale stylesheet bevat de lokale instellingen: degenen die anders zijn de degenen in het default stylesheet. Het lokale stylesheet kan zijn eigenschappen erven van het basis stylesheet, zodat het alleen die instellingen hoeft te bevatten die niet generiek zijn.
Als u meerdere site profielen beheert kan elk daarvan zijn eigen thema hebben of ze kunnen allemaal een gemeenschappelijk thema delen. De lokale stylesheets zijn opgeslagen in /css/themes/ (bijv. /css/themes/orange/orange.css of /css/themes/kids/kids.css).
Het is ook mogelijk meerdere thema's toe te passen op hetzelfde site profiel. De site wordt opgestart met het default thema (voor dat site profiel). Als in een later stadium het thema wordt gewijzigd (bijv. door een keuze binnen de site of als onderdeel van een URL) wordt dit opgeslagen “voor de sessie” (d.w.z. het duurt zo lang als de sessie duurt of totdat u expliciet naar een andere thema wisselt).
Het default stylesheet kan en zal vervangen worden bij upgrades naar nieuwe versies van Iguana, dus u moet dit nooit wijzigen aangezien die wijzigingen verloren zouden gaan bij de upgrade naar de nieuwe versie. Wijzigingen moeten alleen aangebracht worden in de lokale stylesheet(s), degene(n) die uw lokale instellingen bevat(ten).
Hoewel CSS heel krachtig is kent het ook beperkingen. Voor wijzigingen die niet bewerkstelligd kunnen worden via CSS gebruikt Iguana zogeheten sjablonen, die “samenwerken” met CSS voor het stileren en structureren van bepaalde delen van de site. Sjablonen worden verderop in dit document besproken.
De documentatie gaat niet in op CSS als zodanig. Als u hier meer over wilt weten kunt u informatie en online tutorials vinden op Internet (bijv. http://www.w3schools.com/css/) of in vele boeken over het onderwerp.
Let op
Alle specifieke thema's worden bovenop het basis thema toegepast.
2.1.1 Overzicht van Iguana “standaard” thema's
Iguana wordt geleverd met de volgende standaard thema's.
|
orange |
|
highcontrast |
|
flandersRed |
|
flandersBlue |
Orange
Het “oranje” thema is Iguana's default thema. De voornaamste kenmerken van het thema zijn:
· primaire kleuren zijn oranje, grijs en zwart
· achtergrond is wit op een grijs doek
High contrast
Het hoog contrast thema is specifiek bedoeld voor visueel gehandicapte personen aangezien het vooral sterk contrasterende kleuren gebruikt, zoals geel en wit op een zwarte achtergrond. De voornaamste kenmerken van het thema zijn:
· primaire kleuren zijn wit en geel
· achtergrond is zwart
Flanders red
Het “Vlaams rood” thema is gebaseerd op een set richtlijnen voor Vlaamse openbare bibliotheken. De voornaamste kenmerken van het thema zijn:
· primaire kleuren zijn rood en zwart
· achtergrond is wit
· gebruik van “de Bib” logo (rode variant).
Flanders blue
Het “Vlaams blauw” thema is gebaseerd op een set richtlijnen voor Vlaamse openbare bibliotheken. De voornaamste kenmerken van het thema zijn:
· primaire kleuren zijn blauw en zwart
· achtergrond is wit
· gebruik van “de Bib” logo (blauwe variant).
Dit is een blauwe variant van het “flandersred” thema.
2.1.2 Welke CSS bestanden worden gebruikt en waar kunt u ze vinden
De gebruikte CSS bestanden bevinden zich op de webserver in een directory met dezelfde naam als de naam van het stylesheet.
Het basis CSS bestand heet /base/base.css.
Een lokaal CSS bestand heeft een variabele naam, dit kan elke geldige CSS bestandsnaam zijn (bijv. /kids/kids.css of /orange/orange.css).
2.1.3 Thema wijzigen door het mee te geven in een URL
U kunt het thema wijzigen door het mee te geven als onderdeel van de URL. U kunt de URL parameter ?theme=themeName meegeven om het thema te wijzigen, bijv. http://www.site.com/iguana/www.main.cls?theme=kids. Dit roept het kids thema aan.
Als u een thema meegeeft dat niet bestaat wordt de pagina getoond zonder toegepast CSS.
U kunt terugkeren naar het default thema door het mee te geven als ?theme=default, bijv. http://www.site.com/iguana/www.main.cls?theme=default.
2.1.4 CSS en browsers
Hoewel CSS een W3C standaard is, is het belangrijk u te realiseren dat er verschillen tussen browsers kunnen bestaan. Niet elke browser interpreteert CSS op dezelfde manier en het kan zijn dat er aparte oplossingen nodig zijn voor individuele browsers (of zelfs browser versies).
In verdere secties van dit hoofdstuk vindt u informatie met betrekking tot het wijzigen van uw lokale CSS bestand(en). U dient uw wijzigingen altijd te testen voor (recente versies van) de populaire browsers (Internet Explorer, Firefox, Chrome en Safari).
2.2 De stijl van uw site bepalen met CSS
CSS kan worden gebruikt om typische stijlelementen zoals kleuren, lettertypen, achtergrond en uitlijning te wijzigen. Maar het blijft niet beperkt tot zulke relatief eenvoudige instellingen.
2.2.1 CSS voorbeeld
Hoewel het niet de bedoeling is CSS uit te leggen, wordt een eenvoudig voorbeeld gegeven van hoe CSS werkt, als inleiding op navolgende secties over het wijzigen van de stijl van uw website(s).
Het basisprincipe achter het gebruik van CSS is de strikte scheiding tussen inhoud en opmaak aan de ene kant en stileren en formatteren aan de andere kant. Het basisprincipe is dat u een class toekent aan een HTML element en dat u de formattering van de class definieert in CSS.
Een eenvoudig voorbeeld om dit te illustreren: stel dat u op een pagina deze tekst heeft:
Elysium
En u wilt dit wijzigen in
Elysium
Dan kunt u dit als volgt activeren. In de HTML code is het element “Elysium” omgeven door een <DIV>, bijv.
<DIV>Elysium</DIV>
Aan deze <DIV> is een class toegekend, bijv.
<DIV CLASS=”Test”>Elysium</DIV>
U kunt nu CSS gebruiken om de eigenschappen van de class “Test” te definiëren, bijv.
.Test { font-weight: bold; }
[Het voorlooppuntje geeft aan dat “Test” een class is.)
Deze instelling is gedefinieerd in een CSS bestand dat is opgeslagen op de webserver.
Als u dezelfde tekst wilt formatteren naar schuin en rood:
Elysium
wijzigt u de class eigenschappen in bijv.
.Test { font-weight: bold; font-style: italic; color: red; }
2.2.1 De stijl wijzigen in een paar eenvoudige stappen
Het voorbeeld in de vorige sectie is eenvoudig maar het geeft al een aantal van de uitdagingen weer bij het werken met CSS: hoe weet men welke classes gewijzigd moeten worden om het gewenste effect of stijlelement te bereiken? Een CSS bestand kan honderden elementen bevatten met duizenden eigenschappen.
In een aantal gevallen kan men gemakkelijk te weten komen welke classes gebruikt worden omdat “eigen” classes gedefinieerd kunnen worden voor sommige belangrijke Iguana componenten. Dit is bijvoorbeeld het geval bij applicaties die aan een pagina worden toegevoegd: deze kunnen een “eigen” class toegekend krijgen op het moment van toevoegen aan de pagina.
Maar in de meeste gevallen zullen ze door het systeem toegekend zijn en weet u niet welke class namen gebruikt zijn. Om erachter te komen welke class is gebruikt voor een specifiek element kunt u gebruik maken van tools zoals FireBug, een add-on voor de Firefox browser. “Firebug is a web development tool that allows the debugging, editing, and monitoring of any website's CSS, HTML, DOM, and JavaScript, and provides other Web development tools.” (uit http://en.wikipedia.org/wiki/Firebug_(web_development) ).
Ga als volgt te werk om erachter te komen welke class is gebruikt voor een specifiek element:
1. Open de website in Firefox en activeer FireBug.
2. Klik op de button in de bovenste FireBug button balk (
).
3. Nadat u dit gedaan heeft kunt u elk element op de site waar u naar kijkt “inspecteren”. FireBug zowel de HTML als de gerelateerde CSS instellingen. Dit stelt u in staat te detecteren wat de class naam van het element is.
4. Als u de class naam eenmaal weet dan kunt u de stijl eigenschappen wijzigen in het CSS bestand. U kunt dit met een tekstverwerker naar keuze doen (bijv. Kladblok). U dient de naam van het gebruikte thema te kennen om het juiste CSS bestand te kunnen oproepen [Kies nooit /base/base.css.]
5. Nadat u het CSS bestand heeft opgeslagen is de nieuwe instelling beschikbaar. Om dit te kunnen terugzien in uw site zult u in de meeste gevallen de cache van uw browser moeten opschonen en op zijn minst de bewuste pagina opnieuw moeten laden.
In onderstaand schermvoorbeeld ziet u het “inspect element” onderdeel van FireBug in actie. Als u met de muis over een element op de pagina beweegt wordt deze omlijst. In het schermvoorbeeld is dat het geval voor het logo links bovenaan de pagina. Tegelijkertijd is dat element te zien in FireBug's “inspect mode”. Dit toont de class van het element, in dit geval is de “logo”, die gekoppeld is aan de <DIV> die de afbeelding omlijst (de <IMG> tag). Aan de rechterkant van de FireBug pagina ziet u de eigenschappen die aan deze class zijn gekoppeld in het CSS bestand.
Let op
|
|
FireBug is niet de enige tool die gebruikt kan worden om elementen op een pagina te inspecteren. Chrome heeft bijvoorbeeld iets vergelijkbaars, dat aangeroepen kan worden via > . Er verschijnt dan nog een paneel met een optie in de onderste optie balk ( In Internet Explorer kan de aangeroepen worden via > , waar het ( Denk er om dat een class gebruikt kan worden op meer dan één plaats (bijv. .title). Als u de titel maar op één plaats wilt wijzigen dient u de aanroep specifieker te maken. Dit kan gedaan worden door toevoeging van class/ID/.. van ouder elementen. Voorbeeld: als u alleen de .title wilt wijzigen als de klant een groot lettertype kiest, kunt u dit gebruiken:
|
) die vergelijkbaar is met die van FireBug.
) zich in de bovenste balk bevindt.2.2.2 De stijl wijzigen: voorbeelden
Als eerder gezegd geven we geen gedetailleerde uitleg van CSS, aangezien deze informatie op Internet en in boeken gevonden kan worden. We geven hier nog wel een paar voorbeelden van CSS wijzigingen om u een idee te geven hoe visuele effecten te bereiken via CSS.
|
|
We adviseren u de CSS van uw site niet te wijzigen als u geen goede kennis heeft van CSS en enige ervaring met CSS implementaties. |
Onderstaande pagina vormt het startpunt:
CSS Voorbeeld 1 – Andere achtergrondkleur
De achtergrond wordt gewijzigd in twee tinten blauw.
Dit wordt als volgt bereikt in CSS:
#header, .HeaderLogo, #banner, #wrapper,#wrapperinner, #content,#footer, #footerinner {
background : #def !important;}body {
background: #abc !important;}
[ #def en #abc zijn de kleuren. De functie van !important wordt niet uitgelegd, want dat is niet relevant voor het begrijpen van de kleurwijziging in dit voorbeeld. U kunt informatie over de functie van !important op Internet vinden. ]
CSS Voorbeeld 2 – Lettertypefamilie wijzigen
De lettertypefamilie wordt gewijzigd naar Courier.
Dit wordt als volgt bereikt in CSS:
body, div, h1, h2, h3, h4, h5, h6, form, textarea, p, td, input {
font-family: courier;}
[ Met andere woorden: stel de “lettertypefamilie” in op Courier voor al de genoemde HTML tags (body, div, h1, enz.). ]
|
|
Denk er om dat het wijzigen van de lettergrootte veel complexer is, omdat het Iguana default CSS heel vaak het CSS “erfenis” principe hanteert. Dit maakt het lastiger om de waarden te wijzigen. |
CSS Voorbeeld 3 – Afstand tussen widget border en widget content vergroten
De marges tussen widget border en widget content worden vergroot. Om dit visueel meer te laten opvallen voegen we borders en een andere achtergrondkleur toe aan de widgets.
Dit wordt als volgt bereikt in CSS:
.applicationcontainer {
background-color: #fff;
border: 1px solid #999;
margin: 20px;
padding: 20px;}
CSS Voorbeeld 4 – Een andere kleur voor widget titels
De kleur van de widget titel wordt gewijzigd van oranje naar blauw.
Dit wordt als volgt bereikt in CSS:
.apptitle h1, .apptitle h2 {
color: #06c;}
[ Kijk naar de widget titels in onderstaand schermvoorbeeld: ze zijn nu blauw.]
CSS Voorbeeld 5 – Andere kleuren voor het hoofd navigatie menu
De kleuren van het hoofd navigatie menu worden gewijzigd.
Dit wordt als volgt bereikt in CSS:
#navigation {
background: #cef !important;
border: 1px solid #003;}ul.StaticNavigationNSAlt li.root {
background: transparent !important;}ul.StaticNavigationNSAlt li.root {
background: transparent !important;}ul.StaticNavigationNSAlt li.root:hover {
background: #8df !important;}ul.StaticNavigationNSAlt li.root:hover > a {
background: transparent !important;}
CSS Voorbeeld 6 – Browser specifieke instellingen
Als u wilt dat bepaalde instellingen alleen gelden voor een specifieke browser, hoeft u hiervoor niet voor elke browser afzonderlijke stylesheets te definiëren. Dit kan binnen een enkel stylesheet bereikt worden.
Op het hoogste niveau (de ‘html' tag) wordt door Dojo een extra class toegevoegd welke gebruikt kan worden om CSS regels voor verschillende browsers te creëren. In IE staat hier ‘dj_ie', in Firefox ‘dj_gecko' etc.
Let op, deze class is niet te zien door de broncode op te vragen, deze wordt door Dojo ingevoegd. Om deze te bekijken kan FireBug worden gebruikt in Firefox en Developer Tools in IE (F12) etc. En deze class hoeft niet de naam van de browser te zijn, het gaat hier om de rendering engine (bij Chrome staat bijv. ‘dj_khtml dj_gecko').
Een voorbeeld
Stel dat er een CSS regel is:
div.items .item {
background-color: black;
}
En deze dient alleen in IE rood te zijn, dan kan de volgende CSS regel toegevoegd worden:
.dj_ie div.items .item {
background-color: red;
}
3 Sjablonen
3.1 Inleiding
Het concept “sjablonen” is het belangrijkste principe dat structuur geeft aan ‘display elementen' in Iguana. Sjablonen worden voor allerlei doeleinden gebruikt, zoals het structureren van volledige pagina's, het structureren van specifieke applicaties op een pagina,het structureren van delen van applicaties enzovoorts. Sommige sjablonen hebben effect op een gehele pagina anderen zijn gerelateerd aan specifieke regio's.
In de meeste gevallen werken sjablonen samen met CSS instellingen om de feitelijke presentatie tot stand te brengen. Het sjabloon is het hoofdprincipe voor structureren van de data (inhoud) terwijl de CSS instellingen het hoofdprincipe voor bepalen van de stijl zijn. Deze twee principes werken veelvuldig samen en kunnen niet los van elkaar gezien worden.
Sjablonen worden gebruikt voor die wijzigingen in de site die niet bereikt kunnen worden met pure CSS. Bovendien maakt het gebruik van sjablonen het mogelijk additionele classes te introduceren. Het wijzigen van sjablonen geeft u volledige controle over uw site. Het is een krachtige maar ook riskante techniek, aangezien zelfs een kleine wijziging een correcte display kan corrumperen.
Sjablonen worden uitgedrukt in HTML and zijn derhalve technisch van aard. Ze kunnen zogeheten ‘substitution strings' die worden vervangen, als het sjabloon wordt toegepast, door run-time variabelen of door strings gegenereerd door run-time code. [Zie hieronder voor meer informatie over het gebruik van “substitution strings”.] Sommige sjablonen vereisen ook kennis van dojo sjablonen. Dojo is het JavaScript framework gebruikt door Iguana (zie ook http://dojotoolkit.org/).
Als gevolg daarvan kunnen sjablonen complex en moeilijk te lezen zijn. Daarom adviseren we u alleen bestaande sjablonen te wijzigen als dit absoluut noodzakelijk is.
Maar om te voorzien in de (schaarse) keren dat er behoefte is aan het wijzigen van systeem sjablonen, staat Iguana het aanmaken van Lokale inhoud sjablonen toe (in tegenstelling tot hun standaard equivalent). Als u een sjabloon oproept zal Iguana altijd eerst controleren of er een lokale variant is, indien aanwezig zal deze lokale variant worden gebruikt. Zo niet, dat zal Iguana de standaard versie van het sjabloon gebruiken.
Let op
|
|
Het gebruik van ‘substitution strings' is genoemd. Denk er om dat deze “substitution strings” normaliter afhankelijk zijn van het sjabloon en de functionaliteit waar het sjabloon bij hoort. Dus het gebruik van een ‘substitution string' die aanwezig is in sjabloon A voor functionaliteit X zal gewoonlijk niet hetzelfde (of correcte) effect hebben als deze gebruikt wordt in sjabloon B voor functionaliteit Y. Voorbeelden van “substitution strings” kunnen worden gevonden in het hoofdstuk over JavaScript & CSS bestanden in het document over Pagina's & Profielen. |
3.1.1 Sjablonen : functies en voorbeelden
Sjablonen worden voor vele doeleinden gebruikt. De voornaamste gebieden waar ze worden gebruikt zijn:
· de volledig record en zoek pagina (lay-out van display elementen)
· de persoonlijke profielen pagina (lay-out van display elementen)
· applicatie containers (en de drie variaties: containers met een titelbalk, containers zonder een titelbalk, en containers met een titelbalk die verschijnt bij een onMouseOver event,d.w.z. als de muis over de bovenkant van de container bewogen wordt)
· navigatie elementen (bijv. de lay-out van individuele items in een rollover navigatie menu)
· nieuwsbrieven (een module die beschikbaar zal zijn als add-on module na versie 2).
3.1.2 Pagina sjablonen en site profiel secties
Nog fundamenteler dan de sjablonen beschreven in deze sectie zijn pagina sjablonen en site profiel secties. Deze worden niet beheerd via de Sjablonen optie, maar respectievelijk via de Pagina's en Site profielen opties.
Site profiel secties bepalen aanwezigheid van de hoofdsecties van een site (bijv. header, footer, banner, navigation en content sectie). Zie het hoofdstuk Profiel secties: hoe definieer je de lay-out van een site in het document over Pagina's & Profielen.
Pagina sjablonen bepalen de plaats van de applicatie (widgets) in de content sectie van een specifieke pagina. Zie het hoofdstuk Het definiëren van de lay-out van een pagina: sjablonen in het document over Pagina's & Profielen.
3.2 Sjablonen overzicht
Als u de optie Sjablonen kiest uit het navigatie menu:
dan wordt de lijst met bestaande sjabloon instanties getoond.
Deze display maakt gebruik van een generiek element in het Iguana CMS – de overzichtspagina van instanties voor een specifiek data type.
De Sjabloon instanties overzichtspagina wordt beschreven in het hoofdstuk Instanties overzichtspagina van het "Beheer algemene workflow" document.
De opties op de Sjabloon instanties overzichtspagina worden beschreven in het hoofdstuk Opties op de instanties overzichtspagina van het "Beheer algemene workflow" document.
Let op
Sjablonen met een lokale variant hebben een (*) achtervoegsel in de lijst.
3.3 Het aanmaken van een nieuw sjabloon
Ga als volgt te werk om een nieuw sjabloon aan te maken.
6. Klink aan de linkerkant op de link Sjablonen, die staat onder de kop Structuur & Stijl.
7. Klik op het overzichtsscherm met bestaande profielen op de button.
8. Er wordt een nieuwe pagina geopend, waarop u alle eigenschappen van het nieuwe sjabloon kunt definiëren. Definieer alle instellingen voor het nieuwe sjabloon.
9. Klik op de button om uw werk op te slaan.
Omdat Iguana maar een bepaalde set sjablonen “kent”, zal het aanmaken van een nieuw sjabloon geen effect hebben tenzij bijbehorende ontwikkelingen die het nieuwe sjabloon gebruiken uitgevoerd worden.
3.4 Sjabloon eigenschappen overzicht & opties
De eigenschappen van een sjabloon zijn geordend in een aantal zogeheten eigenschap groepen, die overeen komen met secties op de pagina. De eigenschap groepen zijn:
Elk van deze eigenschap groepen is een aparte sectie op de Sjabloon detailpagina. Elke sectie kan in- en uitgeklapt worden door op de titel ervan te klikken. De en buttons kunnen gebruikt worden om alle secties in of uit te klappen.
3.4.1 Basisinstellingen
De basisinstellingen van sjablonen zijn:
Het instellen hiervan gaat als volgt:
Id: Dit is de identificatie van het sjabloon. Gewoonlijk zijn dergelijke identificaties technisch en verwoord in het Engels. Er wordt niet geprobeerd dergelijke identificaties op een niet-technische manier te verwoorden, aangezien ze alleen een technisch doel dienen. Het Id van een sjabloon kan niet worden gewijzigd omdat het aangeroepen wordt door code die deze specifieke Id en Categorie gebruikt (zie volgende eigenschap).
Categorie: Aan elk sjabloon wordt een categorie toegekend. De combinatie van de Categorie en Id maken een sjabloon uniek. De categorie van een sjabloon kan niet worden gewijzigd omdat het aangeroepen wordt door code die deze specifieke Id en Categorie gebruikt.
Inhoud: De standaard versie van de sjabloon inhoud, uitgedrukt in HTML.
Lokale inhoud:De lokale versie van de sjabloon inhoud, uitgedrukt in HTML.
3.4.2 Geavanceerde instellingen
De geavanceerde instellingen van sjablonen zijn:
Aangemaakt door: Dit is de persoon die het Sjabloon aangemaakt heeft en de datum waarop het aangemaakt is. Deze eigenschappen kunnen niet gewijzigd worden.
Gewijzigd door: Dit is de persoon die het Sjabloon het laatst gewijzigd heeft en de datum waarop het gewijzigd is. Deze eigenschappen kunnen niet gewijzigd worden. Alleen zichtbaar bij het bewerken van een bestaand definitie, niet aanwezig bij het definiëren van een nieuw sjabloon.
Uniek id: Dit is het unieke id van het Sjabloon. Dit kan niet gewijzigd worden.
3.4.3 Vorige versies
Iguana kan tot 10 eerdere versies opslaan, die getoond worden in de sectie Vorige versies. Een eerdere versie kan worden opgeroepen door er op te klikken.
Als een eerdere versie is geselecteerd, kan deze opgeslagen worden als de actuele versie door te klikken op de button.
3.5 Een voorbeeld sjabloon
De functie van een sjabloon wordt geïllustreerd aan de hand van een voorbeeld. Onderstaand schermvoorbeeld toont een volledig record pagina voor de beschrijving van “Harry Potter and the Deathly Hallows”. Deze pagina gebruikt meerdere sjablonen. Degene die hier kort uitgelegd wordt is het sjabloon dat gebruikt wordt voor de widget die Gerelateerde werken toont – degene rechts op de pagina met de titel “Misschien ook interessant voor u…”.
Het sjabloon dat wordt gebruikt voor deze widget heet “relatedworks” van de categorie “search”.
Dit sjabloon ziet er zo uit:
<div class='recordDisplayElement smallimage notools' onclick='Search.Results.select("${GroupId}","${RecordId}","RelatedWorks");return false;' style='cursor:pointer;'>
<div class='top'></div>
<div class='image'>${Image}</div>
<div class='data'>
<div class='group'>
<div class='title'>
<span class='title briefMainTitle'>${BriefMainTitle}</span><span class='briefTitle'>${BriefTitle}</span>
</div>
</div>
<div class='group'>
<div class='BriefAuthor'>${BriefAuthor}</div>
<div class='briefMaterial'>${BriefMaterial}</div>
</div>
<div class='group'>
<div class='briefExtract'>${BriefExtract}</div>
</div>
</div>
<div class='bottom'></div></div>
Zonder in details te treden, het sjabloon bestaat uit een <div> structuur, waarbij de <div>'s gerelateerd aan de feitelijke inhoud (de getoonde data) elk bestaan uit een class en een referentie naar een data element. Het auteursgedeelte van de <div> structuur is bijv.
<div class='BriefAuthor'>${BriefAuthor}</div>
Dit betekent simpelweg: toon de auteur (uitgedrukt via de syntax $(BriefAuthor)) en pas de class BriefAuthor (class='BriefAuthor') daarop toe.
Bovenstaand voorbeeld is de systeem versie van het sjabloon. U kunt een lokale versie van dit sjabloon aanmaken en bijvoorbeeld een andere class (andere stijl) toepassen. Of deze <div> uit de structuur verwijderen, hetgeen zou resulteren in een display waarbij de auteur niet langer opgenomen is.
|
|
U wordt geadviseerd niet zomaar sjablonen te wijzigen. Uit dit, relatief eenvoudige, voorbeeld blijkt al dat voor het wijzigen van sjablonen goede kennis van HTML – en in sommige gevallen ook van CSS – vereist is. Bovendien kunnen de token structuren niet gewijzigd worden: als u bijv. $(BriefAuthor) wijzigt in $(BrieffAuthor) [met dubbel ff], dan zou dit resulteren in fouten, omdat de code die het sjabloon gebruikt dat token niet “:kent”. |
3.6 Definiëren start & eind HTML van bodysection
Dit betreft de initiële pagina HTML die wordt gegenereerd door Iguana. De initiële pagina HTML is verdeeld over meerdere secties gebaseerd op het gebruikte site profiel (dit kan ingesteld / opnieuw geordend worden in het CMS voor elk site profiel onder ‘Pagina's & Profielen – Site profielen – Profiel secties'). Deze secties bepalen elk een ‘div' element met een ‘id' attribuut dat aangeeft wat ze zijn en de inhoud wordt daarbinnen geplaatst, met (afhankelijk van het soort sectie) enige HTML aan weerszijde van de inhoud. De algemene HTML structuur is als volgt:
<div id="header">
Pre-content
Content
Post-content
</div>
Waar ‘Pre-content' end ‘Post-content' voorgedefinieerd zijn en afhangen van de specifieke sectie. De waarden van ‘Pre-content' en ‘Post-content' zijn normaliter hard gecodeerd. Maar het is mogelijk dit te doorbreken per soort sectie, door het aanmaken van een sjabloon (als er geen specifiek sjabloon is hier, betekent dit dat de hard gecodeerde waarde wordt gebruikt) waar de waarde van ‘id' gerelateerd is aan de specifieke sectie (‘header', ‘banner', ‘navigation', ‘content' en ‘footer') en ‘bodysection' als de categorie. In dit sjabloon moet de waarde als volgt worden gespecificeerd:
Pre-content-value
Of
Pre-content-value^Post-content-value
Waar Pre-content-value en Post-content-value leeg kunnen zijn.
Pre-content-value wordt gebruikt voor Pre-content in de algemene HTML structuur hierboven, zelfs als deze leeg is. Als ‘^Post-content-value' gegeven is (zelfs als Post-content-value leeg is), wordt dit gebruikt voor Post-content in de algemene HTML structuur hierboven, in overige gevallen wordt de default waarde gebruikt.
We kunnen bijvoorbeeld een sjabloon hebben voor de header sectie, id ‘header' en categorie ‘bodysection', met waarde:
<a name="anchorHeader"></a>^<div style="clear:both; display:block;height:0;"></div>
Dit betekent dat in de gegenereerde HTML, de header sectie er zo uitziet:
<div id="header">
<a name="anchorHeader"></a>
Content
<div style="clear:both; display:block;height:0;"></div>
</div>
3.7 QR code
Het is mogelijk om "Quick Response" codes te integreren in de volledige record display in Iguana.
Het zal er ongeveer zo uitzien:
De QR-code kan in het record scherm worden opgenomen door toevoeging van de $ {QRcode} placeholder aan het record display sjabloon.
Als IE9 of Chrome wordt gebruikt om het volledig record scherm te krijgen, wordt de URL van de QR-code gegenereerd als
https://chart.googleapis.com/chart?chs=150&cht=qr&chl=http%3A//nbibdev.vub.ac.be/opac/2/1870
Als Firefox wordt gebruikt, wordt de code correct gegenereerd als:
[alt="QR", src="https://chart.googleapis.com/chart?chs=150&cht=qr&chl=http%3A//nlbawqavubis/iguana30qa/www.main.cls%3FsUrl%3Dsearch%26p%3D*%23RecordId%3D2.1870"]
· Document control - Change History
|
| Version |
Date |
Change description |
Author |
| |||||
| 1.0 |
August 2011 |
Creation |
|
| |||||
| 1.1 |
December 2011 |
Added screen shots for default themes |
|
| |||||
| 1.2 |
December 2011 |
Processed comments from EdwinVDG |
|
| |||||
| 1.3 |
December 2011 |
Added examples of CSS changes |
Edwin van der Geld |
| |||||
| 1.4 |
December 2011 |
Added more information on sample CSS changes |
|
| |||||
| 1.5 |
January 2012 |
Added header |
|
| |||||
| 1.6 |
January 2012 |
Added Template example Reviewed |
|
| |||||
| 2.0 |
May 2012 |
Reformat for online help doc |
|
| |||||
| 2.1 |
July 2012 |
Dutch translation |
|
|||||||
|
| 3.0 |
October 2012 |
Added screen shots,guidelines, more explanations; reformatted |
|
| |||||
| 3.1 |
April 2014 |
QR code for full record display |
|
| |||||
| 3.2 |
August 2014 |
Textual improvements |
|
| |||||
| 4.0 |
April 2016 |
Local variations of template with * |
|
| |||||